<script setup lang="ts">
import { ref } from 'vue'

interface ChatMessage {
  id: number
  username: string
  content: string
  timestamp: string
}

const messages = ref<ChatMessage[]>([
  {
    id: 1,
    username: "用户1",
    content: "大家好！",
    timestamp: "20:01"
  },
  {
    id: 2,
    username: "用户2",
    content: "主播好厉害！",
    timestamp: "20:02"
  }
])

const newMessage = ref("")

const sendMessage = () => {
  if (!newMessage.value.trim()) return
  
  messages.value.push({
    id: Date.now(),
    username: "我",
    content: newMessage.value,
    timestamp: new Date().toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit' 
    })
  })
  
  newMessage.value = ""
}
</script>

<template>
  <div class="chat-box">
    <div class="messages">
      <div v-for="msg in messages" :key="msg.id" class="message">
        <span class="username">{{ msg.username }}</span>
        <span class="content">{{ msg.content }}</span>
        <span class="timestamp">{{ msg.timestamp }}</span>
      </div>
    </div>
    <div class="input-area">
      <input 
        v-model="newMessage"
        @keyup.enter="sendMessage"
        type="text"
        placeholder="发送消息..."
      >
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<style scoped>
.chat-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  border-radius: 8px;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.message {
  margin-bottom: 0.5rem;
  font-size: 0.9em;
}

.username {
  color: #646cff;
  margin-right: 0.5rem;
  font-weight: bold;
}

.content {
  color: #fff;
}

.timestamp {
  color: #666;
  margin-left: 0.5rem;
  font-size: 0.8em;
}

.input-area {
  padding: 1rem;
  border-top: 1px solid #333;
  display: flex;
  gap: 0.5rem;
}

input {
  flex: 1;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #333;
  background: #2a2a2a;
  color: #fff;
}

button {
  padding: 0.5rem 1rem;
  background: #646cff;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

button:hover {
  background: #747bff;
}
</style>